<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        info: '#06B6D4',
                        light: '#F8FAFC',
                        dark: '#1E293B',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .table-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .btn-hover {
                @apply transition-all duration-200 hover:shadow-md;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .table-row-hover {
                @apply transition-colors duration-150 hover:bg-gray-50;
            }
            .highlight {
                @apply bg-yellow-200 px-1 rounded;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-10 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center gap-2">
            <i class="fa fa-users text-primary text-xl"></i>
            <h1 class="text-lg font-bold text-gray-800">用户管理系统</h1>
        </div>
        <div class="flex items-center gap-4">
            <a href="#" class="text-gray-500 hover:text-primary transition-colors relative">
                <i class="fa fa-bell"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger text-white text-xs rounded-full flex items-center justify-center">3</span>
            </a>
            <div class="flex items-center gap-2 group">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-colors">
                <span class="text-sm font-medium">管理员</span>
                <i class="fa fa-angle-down text-xs text-gray-500 group-hover:text-primary transition-colors"></i>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容 -->
<main class="flex-1 container mx-auto px-4 py-6">
    <!-- 页面标题和操作区 -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">用户列表</h2>
            <p class="text-gray-500 mt-1">管理系统中的所有用户 <span class="text-primary font-medium">${fn:length(userList)}</span> 位用户</p>
        </div>

        <!-- 管理员搜索功能 -->
        <div class="flex flex-wrap gap-3">
            <form action="${pageContext.request.contextPath}/user/list" method="get" class="relative">
                <div class="relative flex-grow max-w-md">
                    <input type="text" name="username" placeholder="请输入用户帐号或姓名搜索"
                           value="${searchUsername}"
                           class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    <button type="submit" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                    <c:if test="${not empty searchUsername}">
                        <a href="${pageContext.request.contextPath}/user/list" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-danger transition-colors">
                            <i class="fa fa-times"></i>
                        </a>
                    </c:if>
                </div>
            </form>

            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center gap-2 btn-hover shadow-sm">
                <i class="fa fa-plus"></i>
                <a href="${pageContext.request.contextPath}/user/add">添加用户</a>
            </button>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow">
        <!-- 表格内容 -->
        <div class="overflow-x-auto">
            <table class="w-full table-shadow">
                <thead>
                <tr class="bg-gray-50 border-b border-gray-200">
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1">
                            <input type="checkbox" class="rounded text-primary focus:ring-primary">
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>头像</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>UID</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>姓名</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>用户名</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>密码</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>电话</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>邮箱</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>积分</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                            <span>角色</span>
                            <i class="fa fa-sort text-gray-400"></i>
                        </div>
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <span>操作</span>
                    </th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                <c:choose>
                    <c:when test="${not empty userList}">
                        <c:forEach items="${userList}" var="user">
                            <tr class="table-row-hover">
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <input type="checkbox" class="rounded text-primary focus:ring-primary" value="${user.uid}">
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <img class="h-10 w-10 rounded-full object-cover border-2 border-transparent hover:border-primary transition-all duration-300"
                                             src="${user.icon}"
                                             alt="${user.name}的头像"
                                             onerror="this.src='https://picsum.photos/40/40'">
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap font-medium">${user.uid}</td>
                                <td class="px-4 py-3 whitespace-nowrap">${user.name}</td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <c:choose>
                                        <c:when test="${not empty searchUsername and fn:containsIgnoreCase(user.username, searchUsername)}">
                                            ${fn:replace(user.username, searchUsername, '<span class="highlight">' + searchUsername + '</span>')}
                                        </c:when>
                                        <c:otherwise>
                                            ${user.username}
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-gray-400">••••••••</span>
                                    <button class="text-xs text-primary hover:text-primary/80 ml-1 transition-colors" onclick="showPassword(this)">显示</button>
                                    <span class="hidden">${user.password}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">${user.number}</td>
                                <td class="px-4 py-3 whitespace-nowrap">${user.email}</td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-info font-medium">${user.scorenum}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <!-- 角色显示优化 - 0:管理员 1:学生 2:教师 -->
                                    <c:choose>
                                        <c:when test="${user.role == 0}">
                                                <span class="bg-danger/10 text-danger px-2 py-1 rounded-full text-xs font-medium">
                                                    <i class="fa fa-shield mr-1"></i>管理员
                                                </span>
                                        </c:when>
                                        <c:when test="${user.role == 1}">
                                                <span class="bg-success/10 text-success px-2 py-1 rounded-full text-xs font-medium">
                                                    <i class="fa fa-graduation-cap mr-1"></i>学生
                                                </span>
                                        </c:when>
                                        <c:when test="${user.role == 2}">
                                                <span class="bg-primary/10 text-primary px-2 py-1 rounded-full text-xs font-medium">
                                                    <i class="fa fa-briefcase mr-1"></i>教师
                                                </span>
                                        </c:when>
                                        <c:otherwise>
                                                <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs font-medium">
                                                    <i class="fa fa-user mr-1"></i>未知
                                                </span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex gap-2">
                                        <a href="${pageContext.request.contextPath}/user/edit/${user.uid}"
                                           class="text-primary hover:text-primary/80 transition-colors p-1 hover:bg-primary/5 rounded"
                                           title="编辑用户">
                                            <i class="fa fa-pencil"></i>
                                        </a>
                                        <a href="${pageContext.request.contextPath}/user/delete/${user.uid}"
                                           onclick="return confirm('确定要删除用户 ${user.name} 吗？此操作不可恢复！')"
                                           class="text-danger hover:text-danger/80 transition-colors p-1 hover:bg-danger/5 rounded"
                                           title="删除用户">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                        <button class="text-secondary hover:text-secondary/80 transition-colors p-1 hover:bg-secondary/5 rounded"
                                                onclick="showUserDetail(${user.uid})"
                                                title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <tr>
                            <td colspan="11" class="text-center py-10 text-gray-500">
                                <div class="flex flex-col items-center justify-center gap-3">
                                    <i class="fa fa-search fa-3x text-gray-300"></i>
                                    <p>没有找到匹配的用户</p>
                                    <a href="${pageContext.request.contextPath}/user/list" class="text-primary hover:text-primary/80 transition-colors">
                                        <i class="fa fa-refresh mr-1"></i>查看所有用户
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </c:otherwise>
                </c:choose>
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <c:if test="${not empty userList}">
            <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 bg-gray-50">
                <div class="flex-1 flex justify-between sm:hidden">
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        上一页
                    </a>
                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        下一页
                    </a>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">${fn:length(userList)}</span> 条，共 <span class="font-medium">${fn:length(userList)}</span> 条记录
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fa fa-chevron-left text-xs"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                                1
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                2
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                3
                            </a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                ...
                            </span>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                8
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fa fa-chevron-right text-xs"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </c:if>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4 mt-8">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>© 2025 用户管理系统 | 版权所有</p>
    </div>
</footer>

<script>
    // 显示/隐藏密码功能
    function showPassword(button) {
        const passwordCell = button.parentElement;
        const hiddenPassword = passwordCell.querySelector('span:not(.hidden)');
        const maskedPassword = passwordCell.querySelector('span.text-gray-400');

        if (maskedPassword.classList.contains('hidden')) {
            // 隐藏真实密码，显示掩码
            maskedPassword.classList.remove('hidden');
            hiddenPassword.classList.add('hidden');
            button.textContent = '显示';
        } else {
            // 显示真实密码，隐藏掩码
            maskedPassword.classList.add('hidden');
            hiddenPassword.classList.remove('hidden');
            button.textContent = '隐藏';
        }
    }

    // 查看用户详情
    function showUserDetail(uid) {
        alert(`查看用户ID为 ${uid} 的详细信息`);
        // 实际应用中可以打开模态框展示详细信息
    }

    // 页面滚动时导航栏效果
    window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('shadow');
            header.classList.remove('shadow-sm');
        } else {
            header.classList.remove('shadow');
            header.classList.add('shadow-sm');
        }
    });

    // 全选/取消全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const headerCheckbox = document.querySelector('thead input[type="checkbox"]');
        const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');

        headerCheckbox.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
                // 添加选中行的高亮效果
                if (this.checked) {
                    checkbox.closest('tr').classList.add('bg-blue-50');
                } else {
                    checkbox.closest('tr').classList.remove('bg-blue-50');
                }
            });
        });

        // 监听行复选框变化
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    this.closest('tr').classList.add('bg-blue-50');
                } else {
                    this.closest('tr').classList.remove('bg-blue-50');
                }
                updateHeaderCheckbox();
            });
        });

        // 更新全选框状态
        function updateHeaderCheckbox() {
            const checkedCount = document.querySelectorAll('tbody input[type="checkbox"]:checked').length;
            headerCheckbox.checked = checkedCount === rowCheckboxes.length;
            headerCheckbox.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>